<template>
  <div>
    <vol-box :model.sync="model" title="产品列表" :width="950" :height="500">
      <div class="but">
        <el-button type="primary" size="small" @click="onClick(1)"
          >新增</el-button
        >
        <el-button type="primary" size="small" @click="onClick(2)"
          >修改</el-button
        >
        <el-button type="primary" size="small" @click="onClick(3)"
          >删除</el-button
        >
      </div>
      <VolTable
        :height="340"
        ref="tableList"
        :columns="columsList"
        :index="true"
        :tableData="tableDataList"
      >
      </VolTable>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.page"
        :page-size="queryParams.size"
        layout="total, prev, pager, next, jumper"
        :total="fyTotal"
      >
      </el-pagination>
      <div slot="footer">
        <Button type="info" @click="model = false" icon="md-close">关闭</Button>
      </div>
    </vol-box>

    <vol-box
      :model.sync="modelAdd"
      :title="'产品发布-' + (modelAddTitle == 1 ? '新建' : '编辑')"
      :width="950"
      :height="500"
    >
      <VolForm
        ref="myform"
        :loadKey="loadKey"
        :formFileds="fomFileds"
        :formRules="fomRules"
        :labelWidth="100"
      ></VolForm>
      <div class="toolbar">
        <div class="title form-text">
          <span>
            <Icon type="md-list-box" />
            发布商品
          </span>
        </div>
      </div>
      <VolTable
        :height="340"
        ref="table"
        :columns="columns"
        :ck="false"
        :index="true"
        :tableData="tableShopData"
      >
      </VolTable>
      <div slot="footer">
        <Button type="error" @click="getFirstRow" icon="md-checkmark"
          >保存</Button
        >
        <Button type="info" @click="modelAdd = false" icon="md-close"
          >关闭</Button
        >
      </div>
    </vol-box>

    <vol-box :model.sync="modeUser" title="二销用户" :width="900" :height="400">
      <div class="but">
        <el-button type="primary" size="small" @click="userClick(1)"
          >新增</el-button
        >
        <el-button type="primary" size="small" @click="userClick(2)"
          >修改</el-button
        >
        <el-button type="primary" size="small" @click="userClick(4)"
          >改密码</el-button
        >
        <el-button type="primary" size="small" @click="userClick(3)"
          >删除</el-button
        >
      </div>
      <VolTable
        :height="340"
        ref="userTable"
        :columns="userColumns"
        :index="true"
        :tableData="userTableData"
      >
      </VolTable>
      <div slot="footer">
        <Button type="info" @click="modeUser = false" icon="md-close"
          >关闭</Button
        >
      </div>
    </vol-box>
    <vol-box
      :model.sync="modeUserAdd"
      :title="'二销用户-' + (userTitle == 1 ? '新建' : '编辑')"
      :width="500"
      :height="350"
    >
      <VolForm
        ref="myform2"
        :formFileds="FiledUser"
        :formRules="ruleUser"
        :labelWidth="100"
      ></VolForm>
      <div slot="footer">
        <Button type="error" @click="saveUser" icon="md-checkmark">保存</Button>
        <Button type="info" @click="modeUserAdd = false" icon="md-close"
          >关闭</Button
        >
      </div>
    </vol-box>

    <vol-box :model.sync="passMode" title="改密码">
      <Alert type="info">
        <h3>
          <span>帐号：{{ rowPassMode.userName }}</span>
          <span>用户：{{ rowPassMode.userTrueName }}</span>
        </h3>
      </Alert>
      <div>
        <Input
          placeholder="请输入密码"
          v-model="password"
          size="large"
          style="  width: 100%;margin-top: 15px;"
        >
          <Icon type="ios-lock" slot="prefix" />
        </Input>
      </div>
      <div slot="footer">
        <Button type="info" icon="md-checkmark-circle" @click="savePwd"
          >保存</Button
        >
        <Button type="info" @click="creditMode = false" icon="md-close"
          >关闭</Button
        >
      </div>
    </vol-box>
    <vol-box :model.sync="creditMode" title="授信" :width="700" :height="350">
      <el-button type="primary" size="small" @click="creditModeAdd = true"
        >添加授信</el-button
      >
      <VolTable
        :height="340"
        ref="creditTable"
        :columns="creditColumns"
        :index="true"
        :ck="false"
        :tableData="creditTableData"
      >
      </VolTable>
      <div slot="footer">
        <Button type="info" @click="creditMode = false" icon="md-close"
          >关闭</Button
        >
      </div>
    </vol-box>

    <vol-box
      :model.sync="creditModeAdd"
      title="添加授信"
      :width="500"
      :height="200"
    >
      <VolForm
        ref="creditForm"
        :formFileds="creditFiled"
        :formRules="creditRule"
        :labelWidth="100"
      ></VolForm>
      <div slot="footer">
        <Button type="error" @click="saveCredi" icon="md-checkmark"
          >保存</Button
        >
        <Button type="info" @click="creditModeAdd = false" icon="md-close"
          >关闭</Button
        >
      </div>
    </vol-box>

    <vol-box 
      :model.sync="codeModel"
      title="二维码"
      :width="420"
      :height="320">
      <div class="codeBox" id="codeBox">
        <span v-if="showText">将二维码拷贝发给分销商，分销商扫码以后他的微信就绑定到该分销商，实现该分销商的在手机随时就能分享和提现。</span>
        <div v-if="showText">自己不要扫哦，一扫你就变成他的管理员了。</div>
        <div v-if="!showText" style="height: 20px"></div>
        <img :src="codeImg" alt="">
        <!-- <img src="https://itownapi.boss.i-town.cn/api/Stores/WXcode?scene=spm=0.16.0.5.3889&supplier=ShangHuYanShiFenXiaoShang" alt=""> -->
      </div>
      <div slot="footer">
        <Button type="success" @click="downloadIamge" icon="md-arrow-round-down"
          >下载</Button
        >
        <Button type="info" @click="codeModel = false" icon="md-close"
          >关闭</Button
        >
      </div>
    </vol-box>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
    VolForm: () => import("@/components/basic/VolForm.vue"),
    VolTable: () => import("@/components/basic/VolTable.vue")
  },
  data() {
    return {
      modelAdd: false,
      modeUserAdd: false,
      user: JSON.parse(sessionStorage.getItem("user")),
      loading: false,
      loadKey: true,
      model: false,
      fomFileds: {
        producttype: [],
        productid: "",
        typeName: "",
        productName: "",
        effectiveStartDate: "",
        effectiveEndDate: "",
        timeContainer: [],
        distri_productid: ""
      },
      productidData: [],
      fomRules: [
        [
          {
            title: "产品类型",
            required: true,
            field: "producttype",
            type: "cascader",
            dataKey: "",
            orginData: [],
            data: [],
            colSize: 4,
            onChange: v => {
              let parmas = {
                page: 1,
                rows: 30,
                sort: "createDate",
                order: "desc",
                wheres: `[{"name":"typeCode","value":"${
                  v[v.length - 1]
                }","displayType":"cascader"},{\"name\":\"distributionid\",\"value\":\"${
                  this.user.code
                }\",\"displayType\":\"select\"},{\"name\":\"effectiveState\",\"value\":\"0\",\"displayType\":\"select\"},{\"name\":\"secondDistributionid\",\"value\":\"${this.secondDistributionid}\",\"displayType\":\"text\"}]`
              };
              let productid = this.getFormOption("productid");
              this.http
                .post("/api/distriProducts/GetPageDataSecond", parmas)
                .then(res => {
                  this.productidData = res.rows;
                  productid.data = res.rows.map(i => {
                    return {
                      key: i.id,
                      value: i.productName
                    };
                  });
                });
            }
          },
          {
            title: "产品名称",
            field: "productid",
            type: "select",
            colSize: 4,
            data: [],
            required: true,
            hidden: false,
            onChange: v => {
              let parmas = {
                page: 1,
                rows: 30,
                sort: "id",
                order: "desc",
                wheres: "[]",
                value: v
              };

              this.http
                .post("/api/distriProducts/getDetailPage", parmas)
                .then(res => {
                  this.tableShopData = res.rows;
                });
              let ov = this.productidData.filter(i => {
                return i.id == v;
              });

              this.fomFileds.distri_productid = ov[0].id;
            }
          },
          {
            title: "产品类型",
            field: "typeName",
            colSize: 6,
            type: "text",
            disabled: true,
            hidden: true
          },
          {
            title: "产品名称",
            field: "productName",
            colSize: 6,
            type: "text",
            disabled: true,
            hidden: true
          },
          {
            title: "起止时间",
            required: true,
            field: "timeContainer",
            colSize: 6,
            type: "datetime",
            range: true
          }
        ]
      ],
      tableShopData: [],
      columns: [
        {
          field: "spare2",
          title: "商品编码",
          type: "string",
          width: 150,
          align: "left",
          fixed: "left"
        },
        {
          field: "spare1",
          title: "商品名称",
          type: "string",
          width: 150,
          align: "left",
          fixed: "left"
        },
        {
          field: "sellingPrice",
          title: "门市价",
          type: "string",
          width: 100,
          align: "left"
        },
        {
          field: "preferentialPrice",
          title: "售价",
          type: "string",
          width: 90,
          min: 0,
          align: "left"
        },
        {
          field: "settlementPrice",
          title: "结算价",
          type: "string",
          width: 90,
          min: 0,
          align: "left"
        },
        {
          field: "updatePrice",
          title: "加价/降价",
          type: "string",
          width: 90,
          edit: { type: "decimal" },
          align: "left"
        },
        {
          field: "isAvailableSecond",
          title: "禁用/启用",
          type: "string",
          width: 90,
          edit: { type: "switch" },
          align: "left"
        }
      ],
      secondDistributionid: "",
      modeUser: false,
      FiledUser: {
        // HeadImageUrl: "",
        UserName: "",
        UserTrueName: "",
        phoneNo: "",
        Gender: "",
        Enable: "",
        CreateDate: "",
        Creator: "",
        Remark: "",
        Role_Id: ""
      },
      ruleUser: [
        [
          {
            title: "帐号",
            required: true,
            field: "UserName",
            disabled: false
          },
          {
            title: "真实姓名",
            required: true,
            field: "UserTrueName",
            type: "text"
          }
        ],
        [
          {
            title: "手机号",
            required: true,
            field: "phoneNo",
            type: "phone"
          },
          {
            dataKey: "",
            title: "性别",
            field: "Gender",
            type: "drop",
            required: true,
            data: []
          }
        ],
        [
          {
            dataKey: "",
            data: [],
            title: "是否可用",
            field: "Enable",
            type: "drop",
            required: true
          },
          {
            title: "注册时间",
            field: "CreateDate",
            disabled: true
          }
        ],
        [{ title: "创建人", field: "Creator", disabled: true }],
        [{ title: "备注", field: "Remark", colSize: 12, type: "textarea" }]
      ],
      modelAddTitle: "",
      userColumns: [
        {
          field: "userName",
          title: "帐号",
          type: "string"
        },
        {
          field: "userTrueName",
          title: "真实姓名",
          type: "string"
        },
        {
          field: "phoneNo",
          title: "手机号",
          type: "string"
        },
        {
          field: "gender",
          title: "性别",
          type: "string",
          bind: { data: [], key: "" },
          width: 50
        },
        {
          field: "enable",
          title: "是否可用",
          type: "string",
          bind: { data: [], key: "" }
        },
        {
          field: "archiveId",
          title: "是否绑定",
          type: "string",
          bind: { data: [{key: 0, value: '否'},{key: 1,value: '是'}]}
        },
        {
          field: "createDate",
          title: "注册时间",
          type: "string"
        },
        {
          field: "creator",
          title: "创建人",
          type: "string"
        },
        {
          field: "remark",
          title: "备注",
          type: "string"
        },
        {
          field: 'D',
          title: '操作',
          type: 'string',
          width: 140,
          render: (h, { row, column, index }) => {
            return h("div", { style: {} }, [h(
              'button',
              {
                class: "ivu-btn",
                on: {
                  click: (e) => {
                    this.http.get(`/api/Users/GetBindAppUrl?UserId=${row.user_Id}`).then((res) => {
                      this.showText = true;
                      if (res.status) {
                        this.codeImg = res.data;
                        this.codeModel = true;
                      } else {
                        this.codeImg = '';
                        this.$Message.error(res.message)
                      }
                    })
                  },
                },
              },
              '绑定'
            ),
            h(
              'button',
              {
                class: "ivu-btn",
                style: {
                  "margin-left": "10px",
                },
                on: {
                  click: (e) => {
                    this.http.get(`/api/Users/GetProductAppUrl?UserId=${row.user_Id}`).then((res) => {
                      this.showText = false;
                      if (res.status) {
                        this.codeImg = res.data;
                        this.codeModel = true;
                      } else {
                        this.codeImg = '';
                        this.$Message.error(res.message)
                      }
                    })
                  },
                },
              },
              '分销'
            )
            ])
          },
        },
      ],
      userTableData: [],
      userTitle: 1,
      columsList: [
        {
          field: "productName",
          title: "产品名称",
          type: "string",
          width: 200,
          align: "left"
        },
        {
          field: "secondDistributionid",
          title: "分销商",
          type: "string",
          bind: { key: "", data: [] },
          width: 220,
          align: "left",
          sortable: true
        },
        {
          field: "typeName",
          title: "产品类型",
          type: "string",
          width: 120,
          align: "left"
        },
        {
          field: "sellingRulesName",
          title: "售卖规则",
          type: "string",
          width: 200,
          align: "left"
        },
        {
          field: "refundrulesName",
          title: "退改规则",
          type: "string",
          width: 200,
          align: "left"
        },
        {
          field: "verificationrulesName",
          title: "核销规则",
          type: "string",
          width: 200,
          align: "left"
        },
        {
          field: "auditStatus",
          title: "审核状态",
          type: "string",
          width: 80,
          bind: { key: "", data: [] },
          align: "left"
        }
        // {
        //   title: "操作",
        //   fixed: "right",
        //   width: 100,
        //   render: (h, { row, column, index }) => {
        //     return h("div", { style: {} }, [
        //       h(
        //         "a",
        //         {
        //           style: { "margin-left": "10px" },
        //           on: {
        //             click: e => {
        //               this.model = false;
        //               this.$router.push({
        //                 name: "V_productbydate",
        //                 params: {
        //                   id: row.id,
        //                   type: 4
        //                 }
        //               });
        //             }
        //           }
        //         },
        //         "价格日历"
        //       )
        //     ]);
        //   }
        // }
      ],
      tableDataList: [],
      fbbj: true,
      // 分页
      queryParams: {
        page: 1,
        size: 20
      },
      // 分页总数
      fyTotal: 0,
      creditMode: false,
      creditFiled: {
        secondDistriCode: "",
        amount_total: "",
        notes: ""
      },
      creditRule: [
        [{ title: "金额", field: "amount_total", required: true }],
        [{ title: "备注", field: "notes", colSize: 12, type: "textarea" }]
      ],
      creditColumns: [
        {
          field: "amount_total",
          title: "金额",
          type: "string",
          width: 100,
          align: "left"
        },
        {
          field: "balance",
          title: "余额",
          type: "string",
          width: 100,
          align: "left"
        },
        {
          field: "createDate",
          title: "创建时间",
          type: "string",
          width: 190,
          align: "left"
        },
        {
          field: "notes",
          title: "备注",
          type: "string",
          width: 220,
          align: "left"
        }
      ],
      creditTableData: [],
      creditModeAdd: false,
      passMode: false,
      rowPassMode: {},
      password: "",
      codeModel: false,
      codeImg: '',
      showText: true,
    };
  },
  created() {
    this.http
      .post("/api/Dictionary/GetVueDictionary", [
        "tree_protype",
        "enable",
        "gender",
        "secondDistributorList",
        "audit"
      ])
      .then(res => {
        res.forEach(i => {
          if (i.dicNo == "tree_protype") {
            i.label = i.value;
            let producttype = this.getFormOption("producttype");
            producttype.data.push(
              ...this.base.convertTree(
                JSON.parse(JSON.stringify(i.data)),
                (node, data, isRoot) => {
                  node.label = node.value;
                  node.value = node.key;
                }
              )
            );
            producttype.orginData.push(...i.data);
          } else if (i.dicNo == "enable") {
            let Enable = this.getUserOption("Enable");
            Enable.data = i.data;
            this.userColumns.forEach(x => {
              if (x.field == "enable") {
                x.bind.data = i.data;
              }
            });
          } else if (i.dicNo == "gender") {
            this.userColumns.forEach(x => {
              if (x.field == "gender") {
                x.bind.data = i.data;
              }
            });
            let Gender = this.getUserOption("Gender");
            Gender.data = i.data;
          } else if (i.dicNo == "secondDistributorList") {
            let secondDistributionid = this.getColumsList(
              "secondDistributionid"
            );
            secondDistributionid.bind.data = i.data;
          } else if (i.dicNo == "audit") {
            let auditStatus = this.getColumsList("auditStatus");
            auditStatus.bind.data = i.data;
          }
        });
      });
  },
  methods: {
    savePwd() {
      if (!this.password) return this.$Message.error("请输密码");
      if (this.password.length < 6)
        return this.$Message.error("密码长度至少6位");
      this.http
        .post(
          "/api/user/modifyUserPwd?password=" +
            this.password +
            "&userName=" +
            this.rowPassMode.userName
        )
        .then(x => {
          if (x.status) {
            this.passMode = false;
            this.$Message.success(x.message);
          } else {
            return this.$message.error(x.message);
          }
        });
    },
    saveCredi() {
      this.creditFiled.secondDistriCode = this.secondDistributionid;
      let params = {
        mainData: {
          ...this.creditFiled
        },
        detailData: null,
        delKeys: null
      };
      this.http.post("/api/Mall_credit_detail/AddCredit", params).then(res => {
        if (res.status) {
          this.creditModeAdd = false;
          this.creditMode = true;
          this.GetCreditData();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    userClick(v) {
      this.userTitle = v;
      let selection = this.$refs.userTable.$refs.table.selection[0];
      if (v == 1) {
        this.modeUserAdd = true;
        this.$refs.myform2.reset();
        this.ruleUser[0][0].disabled = false;
      } else if (v == 2) {
        if (selection != undefined) {
          this.modeUserAdd = true;
          this.FiledUser.User_Id = selection.user_Id;
          this.FiledUser.UserName = selection.userName;
          this.FiledUser.UserTrueName = selection.userTrueName;
          this.FiledUser.phoneNo = selection.phoneNo;
          this.FiledUser.Gender = selection.gender.toString();
          this.FiledUser.Enable = selection.enable.toString();
          this.FiledUser.CreateDate = selection.createDate;
          this.FiledUser.Creator = selection.creator;
          this.FiledUser.Remark = selection.remark;
          this.FiledUser.Role_Id = selection.role_Id;
          this.ruleUser[0][0].disabled = true;
        } else {
          this.modeUserAdd = false;
          this.$Message.error("只能选中一行进行编辑");
        }
      } else if (v == 3) {
        if (selection != undefined) {
          this.http
            .post("/api/Users/DelSecond", [selection.user_Id])
            .then(res => {
              if (res.status) {
                this.$Message.success(res.message);
                this.GetSecondDistriUser();
              } else {
                this.$Message.error(res.message);
              }
            });
        } else {
          this.$Message.error("请选择要删除的行!");
        }
      } else {
        if (selection != undefined) {
          this.rowPassMode = selection;
          this.passMode = true;
        } else {
          this.$Message.error("只能选中一行!");
        }
      }
    },
    saveUser() {
      this.$refs.myform2.validate(() => {
        let params = {
          mainData: {
            secondDistriCode: this.secondDistributionid,
            DeptCode: this.user.merchantCode,
            userTypeDist: this.user.code,
            ...this.FiledUser
          },
          detailData: null,
          delKeys: null
        };
        if (this.userTitle == 1) {
          this.http.post("/api/Users/AddSecond", params).then(res => {
            if (res.status) {
              this.modeUserAdd = false;
              this.$Message.success(res.message);
              this.GetSecondDistriUser();
            } else {
              this.$Message.error(res.message);
            }
          });
        } else {
          this.http.post("/api/Users/UpdateSecond", params).then(res => {
            if (res.status) {
              this.modeUserAdd = false;
              this.GetSecondDistriUser();
              this.$Message.success(res.message);
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    onClick(v) {
      let producttype = this.getFormOption("producttype");
      let productid = this.getFormOption("productid");
      let timeContainer = this.getFormOption("timeContainer");
      let productName = this.getFormOption("productName");
      let typeName = this.getFormOption("typeName");
      this.modelAddTitle = v;
      let selection = this.$refs.tableList.$refs.table.selection[0];
      if (v == 1) {
        this.modelAdd = true;
        this.fbbj = true;
        typeName.hidden = true;
        productName.hidden = true;
        productid.hidden = false;
        producttype.hidden = false;
        this.$refs.myform.reset();
        this.$refs.table.reset();
      } else if (v == 2) {
        if (selection != undefined) {
          productName.hidden = false;
          typeName.hidden = false;
          productid.hidden = true;
          producttype.hidden = true;
          this.fomFileds.timeContainer = [
            selection.secondeffectiveStartDate,
            selection.secondeffectiveEndDate
          ];
          this.fomFileds.productName = selection.productName;
          this.fomFileds.typeName = selection.typeName;
          this.fomFileds.effectiveStartDate = selection.effectiveStartDate;
          this.fomFileds.effectiveEndDate = selection.effectiveEndDate;
          this.fomFileds.id = selection.dissecondId;
          this.fomFileds.distri_productid = selection.id;
          let p = {
            page: 1,
            rows: 100,
            sort: "id",
            order: "desc",
            wheres: "[]",
            value: selection.dissecondId
          };
          this.http
            .post("/api/Mall_distri_product_second/GetDetailPageSecond", p)
            .then(res => {
              if (res.status == 0) {
                this.modelAdd = true;
                this.tableShopData = res.rows;
                this.fbbj = false;
              } else {
                this.$Message.error(res.message);
              }
            });
        } else {
          this.modelAdd = false;
          this.$Message.error("只能选中一行进行编辑");
        }
      } else {
        if (selection != undefined) {
          this.http
            .post("/api/Mall_distri_product_second/DelSecond", [
              selection.dissecondId
            ])
            .then(res => {
              if (res.status) {
                this.$Message.success(res.message);
                this.GetMallDistriProductSecond();
              } else {
                this.$Message.error(res.message);
              }
            });
        } else {
          this.$Message.error("请选择要删除的行!");
        }
      }
    },
    getFormOption(field) {
      let option;
      this.fomRules.forEach(x => {
        x.forEach(item => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    getColumsList(field) {
      let option;
      this.columsList.forEach(item => {
        if (item.field == field) {
          option = item;
        }
      });
      return option;
    },
    getUserOption(field) {
      let option;
      this.ruleUser.forEach(x => {
        x.forEach(item => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    open(row, n) {
      this.secondDistributionid = row.secondDistributorCode;
      if (n == 1) {
        this.model = true;
        this.GetMallDistriProductSecond();
      } else if (n == 2) {
        this.creditMode = true;
        this.GetCreditData();
      } else {
        this.modeUser = true;
        this.GetSecondDistriUser();
      }
    },
    GetCreditData() {
      let params = {
        secondDistriCode: this.secondDistributionid
      };
      this.http
        .get("/api/Mall_credit_detail/GetCreditData", params)
        .then(res => {
          this.creditTableData = res.data;
          this.creditMode = true;
        });
    },
    GetMallDistriProductSecond() {
      let params = {
        order: "desc",
        page: this.queryParams.page,
        rows: this.queryParams.size,
        sort: "",
        wheres: `[{\"name\":\"secondDistributionid\",\"value\":\"${this.secondDistributionid}\",\"displayType\":\"like\"},{\"name\":\"distributionid\",\"value\":\"${this.user.code}\",\"displayType\":\"select\"}]`
      };
      this.http
        .post("/api/Mall_distri_product_second/GetPageDataSecond", params)
        .then(res => {
          this.tableDataList = res.rows;
          this.fyTotal = res.total;
        });
    },
    GetSecondDistriUser() {
      let params = {
        secondDistriCode: this.secondDistributionid
      };
      this.http
        .get("/api/Mall_distributor_second/GetSecondDistriUser", params)
        .then(res => {
          this.userTableData = res.data;
        });
    },

    getFirstRow() {
      if (!this.tableShopData.length) {
        return this.$Message.error("请选择有商品的产品");
      }
      let arr = this.tableShopData.map(i => {
        return {
          id: i.distrigoodsecondId,
          malldistri_goodid: i.id,
          secondDistributionid: this.secondDistributionid,
          updatePrice: i.updatePrice,
          isAvailable: i.isAvailableSecond
        };
      });
      this.fomFileds.effectiveStartDate = this.fomFileds.timeContainer[0];
      this.fomFileds.effectiveEndDate = this.fomFileds.timeContainer[1];
      let params = {
        mainData: {
          secondDistributionid: this.secondDistributionid,
          ...this.fomFileds
        },
        detailData: arr,
        delKeys: null
      };
      if (this.modelAddTitle == 1) {
        this.http
          .post("/api/Mall_distri_product_second/AddSecond", params)
          .then(res => {
            if (res.status) {
              this.modelAdd = false;
              this.$Message.success(res.message);
              this.GetMallDistriProductSecond();
            } else {
              this.$Message.error(res.message);
            }
          });
      } else {
        this.http
          .post("/api/Mall_distri_product_second/UpdateSecond", params)
          .then(res => {
            if (res.status) {
              this.modelAdd = false;
              this.$Message.success(res.message);
              this.GetMallDistriProductSecond();
            } else {
              this.$Message.error(res.message);
            }
          });
      }
    },
    /* 分页 */
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.GetMallDistriProductSecond();
    },
    /* 分页 */
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.GetMallDistriProductSecond();
    },
    downloadIamge() {
      let ele = document.getElementById('codeBox');
      window.scrollTo(0, 0);
      console.log(ele.offsetHeight,'ele');
      let eleW = ele.offsetWidth; // 获得该容器的宽
      let eleH = ele.offsetHeight; // 获得该容器的高
      var canvas = document.createElement("canvas"); // 获得当前窗口的宽度（包含滚动条）
      canvas.width = eleW * 2; // 将画布宽&&高放大两倍
      canvas.height = eleH * 2;
      var context = canvas.getContext("2d");
      context.scale(2, 2);
      html2canvas(ele, {
        dpi: 300,
        scale: 1,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
        x: -2,
        y: -30,
      }).then((canvas) => {
        var oA = document.createElement("a");
        oA.download = '二维码' + ".jpg"; // 设置下载的文件名，默认是'下载'
        oA.href = canvas.toDataURL("image/jpeg");
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
      });
    }
  }
};
</script>
<style lang="less" scoped>
.but {
  margin: 10px;
  justify-content: end;
  display: flex;
}
.toolbar {
  padding: 3px 15px;
  width: 100%;
  display: flex;
  border-top: 1px solid #eae9e9;
  .title {
    line-height: 28px;
    border-bottom: 2px solid #03a9f4;
    font-size: 14px;
    font-weight: bolder;
    margin-bottom: 0;
    color: #828282;
    .icon {
      color: #009688;
      font-size: 18px;
    }
  }
  .btns {
    line-height: 28px;
    flex: 1;
    text-align: right;
    margin-right: 12px;
    button {
      border: none;
      margin-left: 15px;
      border: 0px;
      color: #009688;
    }
    button:hover {
      color: #ff9800;
      border-color: #ff9800;
      border: none;
    }
  }
}
.codeBox {
  display: flex;
  flex-direction: column;
  align-items:center;
  width: 400px;
  height: 300px;
  span {
    font-weight: 600;
    font-size: 14px;
  }
  div {
    color: red;
  }
  img {
    display: block;
    width: 200px;
    height: 200px;
  }
}
</style
>./secendDistributor.vue
